<!-- Created by henian.xu on 2018/9/19. -->

<template>
    <div class="lat-lng-picker">
        <div
            :class="['inner',{'empty':!isModel}]"
            @click="onPicker">
            <div class="label">
                <template v-if="isModel">
                    {{ value }}
                </template>
                <template v-else>{{ placeholder }}</template>
            </div>
        </div>
        <el-dialog
            :title="dialogTitle"
            width="50%"
            :visible.sync="dialog.visible"
            center>
            <baidu-map
                class="map"
                :center="centerLatLng"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                :map-click="false"
                @zoomend="syncCenterAndZoom"
                @click="onMapClick"
            >
                <bm-marker
                    v-if="isSelected"
                    :position="currentLatLng"
                    animation="BMAP_ANIMATION_BOUNCE"/>
                <bm-geolocation
                    anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                    :show-address-bar="true"
                    :auto-location="true"/>
                <bm-control :style="{width: '100%'}">
                    <bm-auto-complete
                        v-model="keyword"
                        :sug-style="{zIndex: 9999999999}">
                        <el-input
                            placeholder="请输入地名关键字"
                            v-model="keyword"/>
                    </bm-auto-complete>
                </bm-control>
                <bm-local-search
                    v-show="false"
                    :keyword="keyword"
                    :auto-viewport="true"/>
            </baidu-map>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="onConfirm">确 定
                </el-button>
                <el-button
                    type="danger"
                    @click="onClear">清 空
                </el-button>
                <el-button @click="dialog.visible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import coordtransform from 'coordtransform';
export default {
    name: 'LatLngPicker',
    data() {
        return {
            dialog: {
                visible: false,
            },
            zoom: 15,
            currentLatLng: {},
            keyword: '',
        };
    },
    props: {
        value: {
            type: String,
            required: true,
            default: '',
        },
        placeholder: {
            type: String,
            default: '请选择坐标',
        },
    },
    computed: {
        model: {
            get() {
                const val = this.value || '';
                const valArr = val.split(',');
                if (valArr.length < 2) {
                    return {};
                } else {
                    const bd09Arr = coordtransform.gcj02tobd09(+valArr[0], +valArr[1]);
                    return {
                        lng: bd09Arr[0],
                        lat: bd09Arr[1],
                    };
                }
            },
            set(val) {
                if (!val || !val.lat || !val.lng) {
                    this.$emit('input', '');
                }
                const gcj02Arr = coordtransform.bd09togcj02(val.lng, val.lat);
                this.$emit('input', `${gcj02Arr[0]},${gcj02Arr[1]}`);
            },
        },
        isModel() {
            return !!this.model.lat && !!this.model.lng;
        },
        isSelected() {
            return !!this.currentLatLng.lat && !!this.currentLatLng.lng;
        },
        centerLatLng() {
            return this.isModel ? this.model : { lng: 116.404, lat: 39.915 };
        },
        dialogTitle() {
            const { currentLatLng } = this;
            if (this.isSelected) {
                const gcj02Arr = coordtransform.bd09togcj02(currentLatLng.lng, currentLatLng.lat);
                return `已选择 (${gcj02Arr[0]},${gcj02Arr[1]})`;
            }
            return '请选择';
        },
    },
    watch: {
        model: {
            handler(val, oldVal = {}) {
                if (!val || (val.lat === oldVal.lat && val.lng === oldVal.lng)) return;
                this.currentLatLng = val;
            },
            immediate: true,
        },
    },
    methods: {
        onPicker() {
            this.dialog.visible = true;
        },
        onMapClick($event) {
            const { point } = $event;
            this.currentLatLng = point;
        },
        onClear() {
            this.$emit('input', {});
            this.model = {};
            this.dialog.visible = false;
        },
        onConfirm() {
            this.model = this.currentLatLng;
            this.dialog.visible = false;
        },
        syncCenterAndZoom($event) {
            this.zoom = $event.target.getZoom();
        },
    },
};
</script>

<style lang="scss">
.lat-lng-picker {
    > .inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;

        > .label {
            flex: 1 1 1%;
            padding: 0 $padding-small;
        }

        &.empty {
            > .label {
                opacity: 0.5;
            }
        }
    }
    .map {
        height: 450px;
    }
}
</style>
